# Next Learn

+ Lo Escencial
  - Primeros Pasos
  - Navegar Entre Páginas
  - Utilizando Componentes Compartidos
  - Crear Páginas Dinámicas
  - URL's Limpias con Enrutamiento Dinaḿico
  - Extraer Datos para Páginas
  - Estilizando los Componentes
  - Desplegando una Aplicación Next.js
+ Lo Avanzado
  - Exportar en una Aplicación Estática HTML
  - Utilizar Typescript
  - Cargando Modulos de Forma Diferida
  - Cargando Componentes de Forma Diferida
  - Creando Páginas Aceleradas para Móviles
  - Preinterpretado Automático

## Lo escencial

### Primeros Pasos

No es un secreto que crear aplicaciones JavaScript de una sola página, puede ser desafiante estos días. Afortunadamente, existen algunos proyectos disponibles que simplifican las cosas y te ayudan a construir aplicaciones más rápido.

[Create React App](https://facebook.github.io/create-react-app/) es un muy buen ejemplo de eso.

Aún así, hay una gran curva de aprendizaje antes de que pueda crear una aplicación adecuada. Esto se debe a que necesita aprender sobre el enrutamiento del lado del cliente, el diseño de la página, etc. Si desea realizar la representación del lado del servidor para cargas de página más rápidas, las cosas pueden volverse aún más difíciles.

**Entonces, necesitamos algo simple pero personalizable.**

Piense en cómo se crean las aplicaciones web con PHP. Creas algunos archivos, escribes código PHP y luego simplemente lo despliegas al servidor. No tenemos que preocuparnos mucho por el enrutamiento, y la aplicación se representa en el servidor de forma predeterminada.

![Image][1]

Eso es exactamente lo que hacemos con [Next.js](https://github.com/zeit/next.js). En lugar de PHP, construimos la aplicación con JavaScript y React. Aquí hay algunas otras características interesantes que Next.js trae a la mesa:

* Páginas Interpretadas del lado del Servidor por defecto.
* División automática de código para cargas de página más rápidas.
* Simple enrutado del lado del cliente (basado en páginas).
* Entorno de desarrollo basado en [Webpack](https://webpack.js.org/). El cual soporta ([Reemplazo de Módulos en Caliente](https://webpack.js.org/concepts/hot-module-replacement/)) (HMR) o *Hot Module Replacement* por sus siglas en inglés.
* Capaz de implementarse con [Express](https://expressjs.com/) o cualquier otro servidor HTTP de [Node.js](https://nodejs.org/).
* Personalizable con sus propias configuraciones de Babel y Webpack.

Suena genial, no? Vamos a darle una oportunidad.

#### Preparación

Next.js funciona con Windows, Mac y Linux igualmente. Sólo necesitas tener Node.js instalado en tu sistema para comenzar a construir aplicaciones Next.js.

Además de que necesitas tener un editor de texto para escribir el código, un programa de Terminal para invocar algunos comandos.

> Si estás en Windows, intenta utilizar PowerShell. Next.js funciona con cualquier shell o terminal, pero en ésta guía nosotros estaremos utilizando algunos comandos específicos de UNIX. Recomendamos usar PowerShell para que sea fácil seguir a continuación.

Para comenzar, crea un proyecto de ejemplo ejecutando los siguientes comandos:

```bash
mkdir hello-next
cd hello-next
npm init -y
npm install --save react react-dom next
mkdir pages
```

Luego abre el archivo `package.json` dentro del directorio `hello-next` y reemplaza el apartado `scripts` con lo siguiente:

```json
"scripts": {
  "dev": "next",
  "build": "next buld",
  "start": "next start"
}
```

Ahora todo esta listo. Ejecuta el próximo comando para comenzar el servidor en modo desarrollo:

```bash
npm run dev
```

Luego abre la dirección <http://localhost:3000> desde tu navegador favorito.

¿Cuál es la sálida que ves en la pantalla?

- A. Error No Page Found
- B. **404 - This page could not be found**
- C. Hello Next.js
- D. Hello World

#### Página 404

Verás una página 404 como esta:

![Image][2]

#### Creando Nuestra Primer Página

Ahora vamos a crear nuestra primer página.

Crea un archivo llamado `pages/index.js` y agrega el siguiente contenido:

```javascript
const Index = () => (
  <div>
    <p>Hello Next.js</p>
  </div>
);

export default Index;
```

Ahora si visitas <http://localhost:3000> de nuevo, verás una página con "Hello Next.js"

Aquí, hemos exportado un componente simple React del módulo `pages/index.js`. Igualmente, tu podrías escribir tu propio componente React y exportarlo.

> Asegurate que tu Componente React se exporta de forma predeterminada con **default**.

Ahora trata de provocar un error de sintaxis en tu página Index. Aquí está un ejemplo: (Nosotros simplemente hemos removido la etiqueta **</p>** de HTML)

```javascript
const Index = () => (
  <div>
    <p>Hello Next.js
  </div>
)

export default Index
```

¿Que le pasará a la aplicación cargada en <http://localhost:3000>?

- A. No sucedió nada
- B. Hay un error con "page not found"
- C. **Hay un mensaje de error mostrando el error sintáctico.**
- D. Hay un error 500 - "Internal Error"

#### Manejo de Errores

Por defecto, Next.js rastreará errores como estos y los mostrará en el navegador. Esto te ayuda a idetificar errores y corregirlos rápidamente.

Una vez que corriga el problema, la página aparecerá instantáneamente sin recargar totalmente la página. Nosotros hacemos esto con la ayuda del mecanismo [Reemplazo de Módulos en Caliente](https://webpack.js.org/concepts/hot-module-replacement/) *Hot Module Replacement*, el cuál está soportado en Next.js por defecto.

#### Eres Increíble

Parece ser que has construído tu primer aplicación Next.js! Qué piensas? Si te gustó, vamos a bucear mas profundo.

Si no te gusto, haznolo saber. Puedes publicar un [problema](https://github.com/zeit/next.js/issues) en nuestro [repositorio de GitHub](https://github.com/zeit/next.js) o unirte a nuestra comunidad en [Spectrum](https://spectrum.chat/next-js)

### Navegar entre Páginas

Ahora sabemos como crear una simple aplicación Next.js y ejecutarla. Nuestra aplicación simple sólo tenía una única página, pero podemos agregar tantas páginas como queramos. Por ejemplo, podemos crear una página "About" agregando el siguiente contenido a un archvo `pages/about.js`:

```javascript
export default function About() {
  return (
    <div>
      <p>This is the about page</p>
    </div>
  );
}
```

Entonces podemos accesar a esa página con <http://localhost:3000/about>.

Después de eso, necesitamos conectar estas páginas. Podríamos usar una etiqueta `<a />` de HTML para eso. Sin embargo, no navegará del lado del cliente; en cambio, el navegador hará una petición al servidor para la próxima página y la refrescará, lo cual no es lo que queremos.

Para soportar navegación del lado del cliente, necesitamos usar la **API** Link de Next.js, la cual se exporta vía `next/link`. La **API** `<Link />` de Next.js obtendrá previamente la página y la navegación sucederá sin refrezcar la página.

Vamos a ver como se utiliza.

#### Preparación

Con el fín de continuar con esta lección, necesitas tener una aplicación simple de Next.js. Para eso, continua con tu trabajo de la lección previa o descarga la siguiente aplicación de ejemplo:

```bash
git clone https://github.com/zeit/next-learn-demo.git
cd next-learn-demo
cd 1-navigate-between-pages
```

Puedes ejecutarla con:

```bash
npm install
npm run dev
```

Ahora puedes acceder a la aplicación navegando a <http://localhost:3000>.

#### Usando Link

Ahora vamos a usar `next/link` para vincular nuestras dos páginas.

Agrega el siguiente código en el archivo `pages/index.js`

```javascript
// This is the Link API
import Link from 'next/link';

const Index = () => (
  <div>
    <Link href="/about">
      <a>About Page</a>
    </Link>
    <p>Hello Next.js</p>
  </div>
);

export default Index;
```

Aquí hemos importado `next/link` como `Link` y lo hemos utilizado así:

```javascript
<Link href="/about">
  <a>About Page</a>
</Link>
```

Ahora trata de visitar <http://localhost:3000>

Después haz clic en el vínculo de "About Page". Te llevará a la página "About".

> Esto es navegación del lado del cliente; la acción toma lugar en el navegador, sin hacer una petición al servidor. Puedes verificar esto abriendo el inspector de peticiones de red de tu navegador.

Bueno, ahora tenemos una pequeña tarea para tí:

+ Visita <http://localhost:3000>
+ Haz clic en "About Page"
+ Entonces presiona el botón de Retroceso (Back)

Cómo describirias mejor la experiencia de usar el boton de Retroceso?

- A. El botón de Retroceso no funcionó.
- B. El botón de Retroceso arrojó un error en la consola del navegador.
- C. **Navegó a la página index (home) del lado del cliente.**
- D. Apareció una alerta diciendo, "import 'next/back' to support back button".

## Lo Avanzado

[1]: https://cloud.githubusercontent.com/assets/50838/24116055/7076ba9c-0dcb-11e7-93d0-ba8f9ac8f6e4.png
[2]: https://cloud.githubusercontent.com/assets/50838/24114002/ac4786f2-0dc4-11e7-8d84-b6f33c8f9aae.png
